<template>
    <div>
        <el-dialog title="详情" v-model="isShowDialog" width="600px" @close="closeDialog">
            <el-form :model="formModel" :disabled="true" size="default" label-width="120px">
                <el-form-item label="客户端文件名" prop="fileName">
                    <el-input v-model="formModel.fileName" show-word-limit maxlength="400" placeholder=""
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="文件大小" prop="fileSize">
                    <el-input-number v-model="formModel.fileSize" :precision="2" :min="0" :max="9999999999"
                        placeholder="" clearable />
                </el-form-item>
                <el-form-item label="扩展名" prop="fileExt">
                    <el-input v-model="formModel.fileExt" show-word-limit maxlength="10" placeholder=""
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="文件格式" prop="contentType">
                    <el-input v-model="formModel.contentType" show-word-limit maxlength="500" placeholder=""
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="服务器文件路径" prop="serverPath">
                    <el-input v-model="formModel.serverPath" show-word-limit maxlength="500" placeholder=""
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="工作空间" prop="workspaceId">
                    <el-input v-model="formModel.workspaceId" show-word-limit maxlength="50" placeholder=""
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="所属平台ID" prop="platformId">
                    <el-input v-model="formModel.platformId" show-word-limit maxlength="50" placeholder=""
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="是否有效" prop="validFlag">
                    <el-select v-model="formModel.validFlag" placeholder="">
                        <el-option v-for="item in yesOrNoEnum" :key="item.key" :label="item.label" :value="item.key" />
                    </el-select>
                </el-form-item>
                <el-form-item label="作用域" prop="scope">
                    <el-select v-model="formModel.scope" placeholder="">
                        <el-option v-for="item in fileScope" :key="item.key" :label="item.label" :value="item.key" />
                    </el-select>
                </el-form-item>
                <el-form-item label="虚拟目录" prop="virtuallyPath">
                    <el-input v-model="formModel.virtuallyPath" show-word-limit maxlength="500" placeholder=""
                        clearable></el-input>
                </el-form-item>
                <el-form-item label="查看次数" prop="pageviewTimes">
                    <el-input-number v-model="formModel.pageviewTimes" :precision="0" :min="0" :max="999999"
                        placeholder="" clearable />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" :disabled="formModel.scope === 2" @click="() => download()" size="default">下 载</el-button>
                    <el-button v-if="formModel.validFlag === 0" type="warning" @click="() => trust(true)" size="default">启 用</el-button>
                    <el-button v-if="formModel.validFlag === 1" type="warning" @click="() => trust(false)" size="default">禁 用</el-button>
                    <el-button @click="() => closeDialog()" size="default">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent, inject } from 'vue';
import { FileInfoDetailModel } from '/@/interfaces/JdfsystemModel';
import useObjectUtil from '/@/utils/objectUtil';
import { DictInfo } from '/@/enums/dict-info-enum';
import useFileInfo from '/@/api/jdfsystem/file-info';
import {handleTrust} from '../file-info-wrap';
import MESSAGE from '/@/enums/message-enum';

interface State {
    isShowDialog: boolean | true,
    submitLoading: boolean | false,
    formModel: FileInfoDetailModel,
    yesOrNoEnum: {key:number, label:string}[],
    fileScope: {key:number, label:string}[],
}
export default defineComponent({
    name: 'FileInfoDetail',
    components: {},
    setup(props, context) {
        const fileInfoApi = useFileInfo();
        const state = reactive<State>({
            isShowDialog: true,
            submitLoading: false,
            formModel: {
                id: undefined,
                workspaceId: undefined,
                fileName: undefined,
                fileSize: undefined,
                fileExt: undefined,
                contentType: undefined,
                serverPath: undefined,
                platformId: undefined,
                validFlag: undefined,
                scope: undefined,
                virtuallyPath: undefined,
                pageviewTimes: undefined,
            },
            yesOrNoEnum: DictInfo.yesOrNo,
            fileScope: DictInfo.fileScope,
        });
        const methodMap = reactive({
            // 下载
            download: function () {
                window.open(fileInfoApi.view(state.formModel.id as string), '_blank')
            },
            trust: async function(flag: boolean) {
                const response = await handleTrust(state.formModel.platformId as string, state.formModel.id as string, flag);
                const {code} = response;
                if(code === MESSAGE.OK) {
                    state.formModel.validFlag = flag ? 1 : 0;
                }
            },
            // 关闭弹窗
            closeDialog: function () {
                state.isShowDialog = false;
                context.emit('onClose');
            }
        });
        // 表单赋值
        const detailData: FileInfoDetailModel | undefined = inject<FileInfoDetailModel>('detailData');
        if (undefined !== detailData) {
            useObjectUtil.copyProperties(detailData, state.formModel);
        } else {
            console.error("found undefined for detail");
        }
        return {
            ...toRefs(state),
            ...toRefs(methodMap),
        };
    },
});
</script>
